<template>
    <div>
        <div>
            <el-form ref="form" model="form" label-width="10px">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="企业名称" prop="name">
                        <el-input v-model="formInline.user" placeholder="请输入企业名称"></el-input>
                    </el-form-item>
                    <el-form-item label="地理位置" prop="wz">
                        <el-input v-model="formInline.user" placeholder="请输入企业地理位置"></el-input>
                    </el-form-item>
                    <el-form-item label="人员数量">
                        <el-input v-model="formInline.user" placeholder="请输入企业人员数量"></el-input>
                    </el-form-item>
                    <el-form-item label="标记颜色">
                        <div class="block">
                            <span class="demonstration"></span>
                            <el-color-picker v-model="color1"></el-color-picker>
                        </div>
                    </el-form-item>
                </el-form>
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="企业简称">
                        <el-input v-model="formInline.user" placeholder="请输入企业简称"></el-input>
                    </el-form-item>
                    <el-form-item label="企业简介">
                        <el-input v-model="formInline.user" placeholder="请输入企业简介"></el-input>
                    </el-form-item>
                    <el-form-item label="主营规模">
                        <el-input v-model="formInline.user" placeholder="请输入主营规模"></el-input>
                    </el-form-item>
                    <el-form-item label="主营业务">
                        <el-input v-model="formInline.user" placeholder="请输入主营业务"></el-input>
                    </el-form-item>
                </el-form>
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="养殖信息">
                        <el-input v-model="formInline.user" placeholder="请输入养殖信息"></el-input>
                    </el-form-item>
                </el-form>
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="企业Logo">
                        <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
                            :show-file-list="false" :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="视频">
                        <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
                            :show-file-list="false" :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                </el-form>
            </el-form>
        </div>




    </div>
</template>


<script>
// import {getCompanyList} from "@/api/infor/index.js"
export default {
    name: "InforIndex",
    data() {
        return {
            formInline: {
                user: '',
                region: ''
            },
            imageUrl: '',
            color1: '#409EFF',
            rules: {
                name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                wz: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
            },
     methods: {
        onSubmit() {
            console.log('submit!');
        },

        //图片
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },

            }
        }

    }
}



</script>

<style>
/*  */

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>